Document-based Apple App that can run on iOS, iPadOS, and macOS

Question

Created Nov ’23

Replies 2

Boosts 0

Participants 2

I am new to developing native Apple apps and must familiarize myself with the Apple development frameworks. I am starting to create a personal document-based Apple App that can run on iOS, iPadOS, and macOS. The document will contain the following: HTML, PDF, images, video, and audio files. So, I think the document format could be HTML.

I need the capability to read, edit (WYSIWYG Editor), save, and share documents with other users using the same app. The data is stored in the user's device and iCloud. I need guidance about what Apple framework I should use to edit the documents using WYSIWYG editing principles.

I would really appreciate any recommendation you can provide. Many thanks for considering my request. Thank you so much for your attention and participation.

Answered by szymczyk in 770663022

Your project idea sounds overwhelming for a first project. I recommend starting with a simpler project before attempting this project. If you really want to do this project right now, start with one smaller part, such as editing HTML, and moving on to things like WYSIWYG editing, video, audio, and sharing documents with users later.

Some technologies you need to learn to make this app include the following:

SwiftUI for the user interface because you want the app to run on iOS and Mac.
PDFKit for showing PDF files.
TextKit, and the NSTextView and UITextView classes. SwiftUI's text editor is very limited and does not support WYSIWYG editing. You would have to subclass NSTextView and UITextView to do WYSIWYG editing.
You might need to study AVFoundation for the video and audio files.

You might find the following list of frameworks for text editing helpful:

https://github.com/mattmassicotte/TextEditingReference

Boost

Answer 1

szymczyk OP

Nov ’23

Accepted Answer

Your project idea sounds overwhelming for a first project. I recommend starting with a simpler project before attempting this project. If you really want to do this project right now, start with one smaller part, such as editing HTML, and moving on to things like WYSIWYG editing, video, audio, and sharing documents with users later.

Some technologies you need to learn to make this app include the following:

SwiftUI for the user interface because you want the app to run on iOS and Mac.
PDFKit for showing PDF files.
TextKit, and the NSTextView and UITextView classes. SwiftUI's text editor is very limited and does not support WYSIWYG editing. You would have to subclass NSTextView and UITextView to do WYSIWYG editing.
You might need to study AVFoundation for the video and audio files.

You might find the following list of frameworks for text editing helpful:

https://github.com/mattmassicotte/TextEditingReference

0

Answer 2

olopul OP

Nov ’23

SwiftUI, WebKit with editor.js is an option I have explored.

Example code:

import SwiftUI
import WebKit

struct EditorJSView: UIViewRepresentable {
    @State private var paragraphContent = "Hello World. Using SwiftUI and Webkit with Editor.js to Build RichText Editor under SwiftUI" 

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.navigationDelegate = context.coordinator
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        let editorJSURL = URL(string: "https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.18.0/dist/editor.js")!

        let script = """
            var editor = new EditorJS({
                holder: 'editorjs',
                data: {
                    "blocks": [
                        {
                            "type": "paragraph",
                            "data": {
                                "text": "\(paragraphContent)",
                            }
                        }
                    ]
                }
            });
        """

        let fullHTML = """
            <html>
                <head>
                    <script src="\(editorJSURL.absoluteString)"></script>
                </head>
                <body style="color:blue;font-size: 100px;">
                    <div id="editorjs" contenteditable="true"></div>
                    <script>
                        \(script)
                    </script>
                </body>
            </html>
        """

        uiView.loadHTMLString(fullHTML, baseURL: nil)
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, WKNavigationDelegate {
        var parent: EditorJSView

        init(_ parent: EditorJSView) {
            self.parent = parent
        }
    }
}

struct ContentView1: View {
    var body: some View {
        VStack {
            EditorJSView()
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView1()
    }
}

0